<template>
<!-- 用到了 -->

<!-- 预览问卷 -->
    <div style="padding: 10px">        
        <!-- 回到顶部 -->
        <template>
            <el-backtop :bottom="100"></el-backtop>
        </template>
        <el-header>
            <el-menu  id="main1-menu"  class="el-menu-demo" mode="horizontal"
                active-text-color="#E6A23C">        
                <div style="float:right;padding:15px 50px;">
                    <router-link to="/book">
                        <el-button round>返回问卷库</el-button>
                    </router-link>                                      
                </div>
            </el-menu>
        </el-header>
        <div class="title">
            <h2>{{stitle}}</h2>            
        </div>
        <div class="temp1"></div>
        <div>            
            <el-card class="context" shadow="always">
                <div class="survey-form">
                    <el-form id="surveyData" ref="surveyData"  :model="surveyData">

                        <div v-if="questions.length===0">
                            <h2>该问卷暂无问题</h2>
                        </div>

                        <el-form-item v-for="(question,i) in questions" :key="i" :prop="'res['+i+'].answer'">
                            <div class="qtitle-css" v-if="question.type===1">{{i+1}}、{{question.questionName}}{{'('+danxuanti+')'}}</div>
                            <div class="qtitle-css" v-if="question.type===2">{{i+1}}、{{question.questionName}}{{'('+duoxuanti+')'}}</div>
                            <div class="qtitle-css" v-if="question.type===3">{{i+1}}、{{question.questionName}}{{'('+tiankong+')'}}</div>


                            <!-- 单选题 -->
                            <div v-if="question.type===1 && question.id===surveyData.res[i].id" style="width:80%;">
                                <span v-for="(op,index) in question.optionData" :key="index">
                                    <el-radio v-model="surveyData.res[i].answer" :label="op.id">{{op.optionName}}&nbsp;&nbsp;&nbsp;</el-radio>
                                </span>
                            </div>
                            <!-- 多选题 -->
                            <div v-if="question.type===2 && question.id===surveyData.res[i].id" style="width:80%;">
                                <el-checkbox-group v-model="surveyData.res[i].answer">
                                    <span v-for="op in question.optionData" :key="op" style="width:80%;">
                                        <el-checkbox :label="op.id">{{op.optionName}}&nbsp;&nbsp;&nbsp;</el-checkbox>
                                    </span>
                                </el-checkbox-group>
                            </div>
                            <!-- 简答题 -->
                            <div v-if="question.type===3 && question.id===surveyData.res[i].id">
                                <el-input type="textarea" v-model="surveyData.res[i].answer" show-word-limit style="width:400px;" placeholder="请输入"></el-input>
                            </div>
                        </el-form-item>                     
                        
                    </el-form>
                </div>
            </el-card>
        </div>
    </div>
</template>


<script>
import axios from 'axios';
export default {
    data(){     
        var checkAnswer = (rule, value, callback) => {
            if (value === '') {
                return callback(new Error('这一题还没有填哦！'));
            }else{
                callback();
            }
        };   
        return {
            danxuanti:"单选题",
            duoxuanti:"多选题",
            tiankong:"填空题",
            id: this.$route.query.id,
            form:{
                options:''
            },
            surveyData:{
                id: '',
                res:[]
            },
            rules:{
                res:[]
            },
            stitle: '',
            questions: []
        }
    },
    methods:{
        //加载问卷内容
        loadSurveyInfo(){
            // console.log(this.sid)
            // if(this.sid > 0){
            //     this.axios.post('/api/surveyPage',{
            //         sid: this.sid
            //      })
            //     .then(res => {
            //         console.log(res)
            //         if (res.status===200) {
            //             this.stitle = res.data.stitle;                        
            //             document.title = '预览—'+this.stitle;
            //             this.surveyData.sid = this.sid;
            //             this.questions = res.data.questions;
            //             this.questions.forEach(element => {
            //                 if (element.qtype === 2) {
            //                     //多选题，添加的回答数据结构为数组
            //                     this.surveyData.res.push({
            //                         qid:element.qid,
            //                         qtype: element.qtype,
            //                         answer:[]
            //                     });
            //                 }else{
            //                     this.surveyData.res.push({
            //                         qid:element.qid,
            //                         qtype: element.qtype,
            //                         answer:''
            //                     });
            //                 } 
            //                 this.rules.res.push({
            //                     answer:[{required: true, validator: this.checkAnswer,message:"这一题还没有填哦！", trigger: 'blur'}]
            //                 });    
            //             });
            //             console.log(this.surveyData.res)
            //         }
            //     })
            //     .catch(err => {
            //         console.error(err); 
            //     })
            // }
            const _this=this
            axios({
                // url:'http://uchiha.vip:5000/questionnaireContent/?questionnaireId='+this.$route.query.id,
                url:'/questionnaireContent/?questionnaireId='+this.$route.query.id,

                method:"get",
            }).then(function(res){
                    console.log(res.data)
                    if(res.data.msg=='上传成功'){
                        console.log(5555)
                       // console.log(res.data.data[0].id)
                        _this.surveyData.id=res.data.data.id;
                       // console.log( _this.surveyData.id)
                        _this.questions=res.data.data;
                        //console.log(_this.questions)
                        _this.questions.forEach(element=>{
                            if(element.type==2){
                                _this.surveyData.res.push({
                                    id:element.id,
                                    type: element.type,
                                    answer:[]
                                });
                            }
                            else{
                                _this.surveyData.res.push({
                                    id:element.id,
                                    type: element.type,
                                    answer:''
                                });
                            }
                        });
                        //console.log(_this.surveyData.res)
                    }

                    // if (res.msg==="上传成功") {
                    //     //this.stitle = res.data.stitle;                        
                    //     //document.title = '预览—'+this.stitle;
                    //     this.surveyData.sid = this.sid;
                    //     this.questions = res.data.questions;
                    //     this.questions.forEach(element => {
                    //         if (element.type === 2) {
                    //             //多选题，添加的回答数据结构为数组
                    //             this.surveyData.res.push({
                    //                 qid:element.qid,
                    //                 type: element.type,
                    //                 answer:[]
                    //             });
                    //         }else{
                    //             this.surveyData.res.push({
                    //                 qid:element.qid,
                    //                 type: element.type,
                    //                 answer:''
                    //             });
                    //         } 
                    //         this.rules.res.push({
                    //             answer:[{required: true, validator: this.checkAnswer,message:"这一题还没有填哦！", trigger: 'blur'}]
                    //         });    
                    //     });
                    //     console.log(this.surveyData.res)
                    // }

            })

        }
    },
    mounted(){
        this.loadSurveyInfo();
    }
}
</script>